<template>
  <view class="page-container">
    <!-- 页面头部 -->
    <view class="page-header">
      <view class="header-title">关于我们</view>
    </view>
    
    <!-- 关于我们内容区域 -->
    <view class="about-content">
      <!-- 品牌logo与名称 -->
      <view class="brand-info">
        <view class="logo-container">
          <image src="https://picsum.photos/200/200" class="logo" mode="aspectFit"></image>
        </view>
        <view class="app-name">AppName</view>
        <view class="app-slogan">让生活更简单</view>
        <view class="version-info">版本号：{{ appVersion }}</view>
      </view>
      
      <!-- 品牌介绍 -->
      <view class="settings-section">
        <view class="section-title">品牌介绍</view>
        <view class="about-desc">
          <text>AppName成立于2020年，是一款致力于为用户提供便捷生活服务的应用。我们始终坚持以用户需求为核心，通过技术创新提升生活品质，目前已服务超过1000万用户。</text>
        </view>
      </view>
      
      <!-- 发展历程 -->
      <view class="settings-section">
        <view class="section-title">发展历程</view>
        <view class="timeline">
          <view class="timeline-item" v-for="(item, index) in historyItems" :key="index">
            <view class="timeline-dot" :class="{ active: index === historyItems.length - 1 }"></view>
            <view class="timeline-content">
              <view class="timeline-year">{{ item.year }}</view>
              <view class="timeline-text">{{ item.text }}</view>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 团队展示 -->
      <view class="settings-section">
        <view class="section-title">核心团队</view>
        <view class="team-members">
          <view class="member-card" v-for="(member, index) in teamMembers" :key="index">
            <image :src="member.avatar" class="member-avatar" mode="aspectFill"></image>
            <view class="member-info">
              <view class="member-name">{{ member.name }}</view>
              <view class="member-title">{{ member.title }}</view>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 联系方式 -->
      <view class="settings-section">
        <view class="section-title">联系方式</view>
        <view class="contact-list">
          <view class="contact-item" @click="openLink(contact.url)" v-for="contact in contactInfo" :key="contact.type">
            <view class="contact-icon">
              <uni-icons :type="contact.icon" size="32" color="#909399"></uni-icons>
            </view>
            <view class="contact-text">{{ contact.name }}</view>
            <uni-icons type="arrowright" size="28" color="#C0C4CC"></uni-icons>
          </view>
        </view>
      </view>
      
      <!-- 版权信息 -->
      <view class="copyright">
        <text>© {{ currentYear }} AppName 版权所有</text>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';

// 应用版本号
const appVersion = ref('1.8.6');
// 当前年份
const currentYear = ref(new Date().getFullYear());

// 发展历程数据
const historyItems = ref([
  { year: '2020年', text: 'AppName正式上线，推出基础生活服务功能' },
  { year: '2021年', text: '用户量突破100万，新增社交互动模块' },
  { year: '2022年', text: '完成A轮融资，团队规模扩展至50人' },
  { year: '2023年', text: '服务城市超过100个，上线商家合作平台' },
  { year: '2024年', text: '用户量突破1000万，推出AI智能推荐系统' }
]);

// 核心团队数据
const teamMembers = ref([
  {
    name: '张小明',
    title: '创始人兼CEO',
    avatar: 'https://picsum.photos/200/200?random=1'
  },
  {
    name: '李技术',
    title: '技术总监',
    avatar: 'https://picsum.photos/200/200?random=2'
  },
  {
    name: '王设计',
    title: '设计总监',
    avatar: 'https://picsum.photos/200/200?random=3'
  },
  {
    name: '赵产品',
    title: '产品总监',
    avatar: 'https://picsum.photos/200/200?random=4'
  }
]);

// 联系方式数据
const contactInfo = ref([
  { type: 'website', name: '官方网站', icon: 'globe', url: 'https://www.example.com' },
  { type: 'email', name: '联系邮箱', icon: 'email', url: 'mailto:support@example.com' },
  { type: 'weibo', name: '官方微博', icon: 'weibo', url: 'https://weibo.com/example' },
  { type: 'wechat', name: '官方微信', icon: 'wechat', url: 'https://weixin.qq.com/example' }
]);

// 页面加载时获取版本信息
onMounted(() => {
  // 模拟从后端获取版本信息
  setTimeout(() => {
    appVersion.value = '1.8.6';
  }, 300);
});

// 打开链接
const openLink = (url: string) => {
  uni.navigateTo({ url: `/pages/web-view/web-view?url=${encodeURIComponent(url)}` });
};
</script>

<style scoped>
/* 继承全局样式 */
page {
  height: 100%;
  background-color: #F5F7FA;
  font-size: 28rpx;
  color: #333;
}

.page-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* 页面头部 */
.page-header {
  height: 120rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: white;
  position: relative;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.header-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #303133;
}

/* 关于我们内容区 */
.about-content {
  flex: 1;
  padding-bottom: 60rpx;
  box-sizing: border-box;
  background-color: #F5F7FA;
}

/* 品牌信息 */
.brand-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60rpx 40rpx;
  background-color: white;
  margin-bottom: 30rpx;
  border-radius: 16rpx;
  box-shadow: 0 5rpx 15rpx rgba(0, 0, 0, 0.05);
}

.logo-container {
  width: 200rpx;
  height: 200rpx;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 30rpx;
  box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.1);
}

.logo {
  width: 100%;
  height: 100%;
}

.app-name {
  font-size: 40rpx;
  font-weight: 700;
  color: #303133;
  margin-bottom: 10rpx;
}

.app-slogan {
  font-size: 28rpx;
  color: #909399;
  margin-bottom: 20rpx;
}

.version-info {
  font-size: 24rpx;
  color: #C0C4CC;
}

/* 品牌介绍 */
.about-desc {
  padding: 30rpx 40rpx;
}

.about-desc text {
  font-size: 28rpx;
  color: #606266;
  line-height: 1.8;
}

/* 时间线 */
.timeline {
  position: relative;
  padding: 30rpx 40rpx;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 34rpx;
  top: 0;
  bottom: 0;
  width: 4rpx;
  background-color: #E5E9F2;
  border-radius: 2rpx;
}

.timeline-item {
  position: relative;
  padding-left: 70rpx;
  margin-bottom: 40rpx;
}

.timeline-item:last-child {
  margin-bottom: 0;
}

.timeline-dot {
  position: absolute;
  left: 20rpx;
  top: 10rpx;
  width: 24rpx;
  height: 24rpx;
  background-color: #E5E9F2;
  border-radius: 50%;
  z-index: 1;
  transition: all 0.3s;
}

.timeline-item.active .timeline-dot {
  width: 32rpx;
  height: 32rpx;
  background-color: #409EFF;
  border: 4rpx solid white;
  box-shadow: 0 0 0 4rpx rgba(64, 158, 255, 0.15);
}

.timeline-content {
  position: relative;
}

.timeline-year {
  font-size: 28rpx;
  color: #909399;
  margin-bottom: 10rpx;
}

.timeline-text {
  font-size: 28rpx;
  color: #303133;
  line-height: 1.6;
}

/* 团队展示 */
.team-members {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 30rpx 40rpx;
}

.member-card {
  width: calc(50% - 20rpx);
  margin-bottom: 40rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.member-avatar {
  width: 160rpx;
  height: 160rpx;
  border-radius: 50%;
  margin-bottom: 20rpx;
}

.member-info {
  text-align: center;
}

.member-name {
  font-size: 28rpx;
  color: #303133;
  margin-bottom: 8rpx;
}

.member-title {
  font-size: 24rpx;
  color: #909399;
}

/* 联系方式 */
.contact-list {
  padding: 0;
}

.contact-item {
  display: flex;
  align-items: center;
  padding: 30rpx 40rpx;
  border-bottom: 1rpx solid #F5F7FA;
}

.contact-item:last-child {
  border-bottom: none;
}

.contact-icon {
  width: 40rpx;
  height: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
}

.contact-text {
  flex: 1;
  font-size: 32rpx;
  color: #303133;
}

/* 版权信息 */
.copyright {
  text-align: center;
  padding: 30rpx 40rpx;
  font-size: 24rpx;
  color: #C0C4CC;
}
</style>